<template>
	<div>
		<div class="container">
			<div class="toolbar mt-2">
				<a-form ref="searchRef" :model="searchState" @finish="current = 1; loading = true; initData()">
					<a-row :gutter="20">
						<a-col :span="6">
							<a-form-item label="日期">
								<a-date-picker v-model:value="searchState.date" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="3">
							<a-form-item>
								<a-space>
									<a-button type="primary" html-type="submit">
										<search-outlined />搜索
									</a-button>
								</a-space>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<div class="mt-2">
				<!--
        v-if="!loading"使得:default-expand-all-rows="true"生效
        -->
				<a-table :columns="columns" :scroll="tableScroll" children-column-name="children" :default-expand-all-rows="false" :data-source="source" :pagination="pagination" :loading="loading" @change="initData">
				</a-table>
			</div>
		</div>
	</div>
</template>
<script setup>
import { RightOutlined, SearchOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { usePagination } from "vue-request";
import { post } from "@/utils/index.js";
import { computed, reactive } from "vue";
import dayjs from "dayjs";

const router = useRouter();
const searchState = reactive({});
const columns = [
	{
		title: "时间",
		dataIndex: "create_time",
		sorter: false,
		width: 150,
		ellipsis: true,
		fixed: "left"
	},
	{
		title: "用户",
		dataIndex: "user",
		sorter: false,
		width: 80,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return text.fullname;
		}
	},
	{
		title: "意见",
		dataIndex: "content",
		align: "center"
	}
];
const tableScroll = computed(() => ({
	x: document.documentElement.clientWidth - 650
}));
const source = computed(() =>
	(data.value?.data || []).map(d => {
		if (d.children?.length === 0) delete d.children;
		return d;
	})
);
const { data, loading, run, current, pageSize, total } = usePagination(params => {
	const search = {};
	if (searchState.date) {
		search.date = dayjs(searchState.date).format('YYYY-MM-DD');
	}
	return post("feedback", { ...params, ...search });
}, {
	defaultParams: [
		{
			page_size: 10
		}
	],
	pagination: {
		currentKey: "page",
		pageSizeKey: "page_size",
		totalKey: "total"
	}
});
const initData = (pag, filters, sorter) => {
	pag = Object.assign(
		{
			current: current.value,
			pageSize: pageSize.value
		},
		pag || {}
	);
	filters = { ...filters };
	const query = {};
	if (pag?.pageSize) {
		query['page_size'] = pag?.pageSize;
	}
	if (pag?.current) {
		query['page'] = pag?.current;
	}
	router.replace({ query: {
		...query,
		...filters
	}})
	run({
		page_size: pag?.pageSize,
		page: pag?.current,
		sort_field: sorter?.field,
		sort_order: sorter?.order,
		...filters
	});
};
const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));
</script>
<style scoped lang="scss">
.container {
  background: #fff;
  padding: 12px;
}
</style>
